<template>
  <el-row>
    <el-menu default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect"         background-color="#f0f0f0"
        active-text-color="#409EFF"
    >
      <el-menu-item :index="index"  v-for="(type, index) in typeList" :key="type.id" @click="liveRoomListByTypeId(type.id)">{{type.name}}</el-menu-item>
    </el-menu>
    <el-col :span="5" v-for="(room, index) in roomList" :key="room.id" style="margin: 20px;" >
      <router-link :to="{ name: 'live', query: { roomId: room.id}}" style="text-decoration: none;">
        <el-card :body-style="{ padding: '10px' }" style="background-color: #f0f0f0;" shadow="hover">
          <img :src="room.coverUrl" class="image">
          <div style="padding: 14px;">
            <span >{{room.title}}</span>
              <div><el-avatar
              shape="circle"
              size="32"
              src="https://vue.ruoyi.vip/static/img/profile.473f5971.jpg"
              class="avatar" style="margin-top: 10px;float: left;width: 32px;height: 32px;"
            />
            <p style="float: left;font-size: 14px;margin-top: 20px;margin-left: 10px;" >{{room.userName}}</p>
            </div>
          </div>
        </el-card>
      </router-link>
    </el-col>
  </el-row>
  
  </template>
<script>
import { getIndex,liveRoomListByTypeId } from '@/api/index'
export default {
  data() {
    return {
      roomList: [],//直播间列表
      typeList: [],//直播分类列表
    };
  },
  mounted() {
    this.getIndexInfo();
  },
  methods: {
    getIndexInfo() {
      getIndex().then(res => {
          this.roomList=res.data.roomList;
          this.typeList=res.data.typeList;
        }).catch(error => {
          this.$message.error("失败");//弹框提示信息
        })
    },
    liveRoomListByTypeId(id) {
      liveRoomListByTypeId(id).then(res => {
          this.roomList=res.data;
        }).catch(error => {
          this.$message.error("失败");//弹框提示信息
        })
    },
  }
}
</script>

<style>
    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }
  
    .button {
      padding: 0;
      float: right;
    }
  
    .image {
      width: 100%;
      height: 200px;
      border-radius: 10px;
      display: block;
    }
  
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    
    .clearfix:after {
        clear: both
    }
  </style>